<template>
	<view>
		<!-- 问题描述区 -->
		<view class="box_twwti">
			<!-- 问题标题 -->
			<view class="box_wzbt">金蝶卸载软件提示还有金蝶文件？</view>
			<!-- 描述内容 -->
			<view class="box_xshiweni">
				安装新版本的金蝶安装不上，总是提示请先卸载已有的程序，但实际上已经卸载了之前的软件
			</view>
			<!-- 模块区 -->
			<view class="Modulearea">
				<view
					style="width: 160rpx;height: 40rpx;background: #FCEDEF;border-radius: 4rpx;font-weight: 400;font-size: 22rpx;color: #E25266; text-align: center; line-height: 40rpx;">
					国大管业一期</view>
				<view
					style="width: 144rpx;height: 40rpx;background: #FCF2EC;border-radius: 4rpx;font-weight: 400;font-size: 22rpx;color: #E7864A;text-align: center; line-height: 40rpx;">
					金蝶云星空</view>
				<view
					style="width: 120rpx;background: #EEF6FD;font-weight: 400;font-weight: 400;font-size: 22rpx;color: #5BA7F2;text-align: center; line-height: 40rpx;">
					供应链</view>
				<view
					style="width: 120rpx;height: 40rpx;background: #F5F1FB;border-radius: 4rpx;font-weight: 400;font-size: 22rpx;color: #9D7CE0;text-align: center;line-height: 40rpx; ">
					采购模块</view>
			</view>
			<!-- 请求解答 -->
			<view class="box_qqjieda">
				请求解答：<view>@美羊羊</view>
				<view>@喜洋洋</view>
			</view>
			<!-- 提问时间 -->
			<view class="Question_date">
				提问时间： <view>2024-05-18-12:37</view>
			</view>
			<!-- 图片展示区 -->
			<view class="Picture_display">
				<view v-for="(imageSrc, index) in imageList" :key="index" class="box_tupianqu">
					<image :src="imageSrc" style="width: 100%; height: 100%;" mode=""></image>
				</view>
			</view>
			<!-- 查看附件 -->
			<view class="View_attachment">
				<image src="http://openapi.keyboardadmin.com:9001/KingdeeCommunity/fujian@2x.png"
					style="width: 36rpx; height: 32rpx; margin-right: 5rpx;" /> 查看附件
			</view>
			<!-- 头像 -->
			<view class="tiwnzhe">
				<view class="profile_name">
					<view class="avatar">
						<image :src="userAvatar" style="width: 100%; height: 100%; border-radius: 50%;" />
					</view>
					<view class="Nameattribution">
						<view class="name_mc">
							<view>{{ userName }}</view>
							<view class="role-badge">{{ userRole }}</view>
						</view>
						<view class="Gsimingcheng">{{ userCompany }}</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 解决方案 回答区 -->
		<view class="box_jjfan">
			<image src="http://openapi.keyboardadmin.com:9001/KingdeeCommunity/title@2x.png"
				style="width: 248rpx; height: 46rpx;" />
		</view>

		<view class="Box_Hdawenti" v-for="(item, index) in uaniiql" :key="index">
			<!-- 头像 -->
			<view class="tiwnzhe1">
				<view class="profile_name">
					<view class="avatar">
						<image :src="userAvatar" style="width: 100%; height: 100%; border-radius: 50%;" />
					</view>
					<view class="Nameattribution">
						<view class="name_mc">
							<view>{{ item.name }}</view>
							<view class="role-badge">{{ item.buMen }}</view>
						</view>
						<view class="Gsimingcheng">{{ item.gongSI }}</view>
					</view>
				</view>
			</view>
			<!-- 留言板 -->
			<view class="box_lyb">
				<view v-for="(content, index) in item.Neirongqu" :key="index">{{ content }}</view>
			</view>
			<!-- 时间_回复 -->
			<view class="Timereply">
				<view class="responsetime">
					<text>回答时间：</text>
					<view>{{ item.date }}</view>
				</view>
				<view class="reply">回复</view>
			</view>
		</view>

		<!-- 底部区域 -->
		<view class="diBuquyu">
			<view class="ui_san">
				<view class="action-btn" @click="collect">
					<image src="http://openapi.keyboardadmin.com:9001/KingdeeCommunity/collect_yes@2x.png"
						style="width: 50rpx; height: 48rpx;" />
					收藏
				</view>
				<view class="action-btn">
					<image src="http://openapi.keyboardadmin.com:9001/KingdeeCommunity/delate@2x.png"
						style="width: 50rpx; height: 48rpx;" />
					删除
				</view>
				<view class="action-btn">
					<image src="http://openapi.keyboardadmin.com:9001/KingdeeCommunity/edit@2x.png"
						style="width: 50rpx; height: 48rpx;" />
					修改
				</view>
			</view>
			<view class="btn-container">
				<text>已评价</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				customerName: '',
				question: '',
				reply: '',

				uaniiql: [{
						name: '李华',
						buMen: '产品部',
						gongSI: '温州智汇科技有限公司',
						Neirongqu: [
							'打开“我的电脑”，选择“工具”“文件夹选项”“查看”，取消隐藏受保护的操作系统文件，勾选“显示所有文件和文件夹”。',
							'在 C 盘找到 program files 文件夹，进入 installshield installation information，删除指定文件夹，重启电脑。'
						],
						date: '2024-06-01 09:30'
					},
					{
						name: '王敏',
						buMen: '销售部',
						gongSI: '绍兴未来科技有限公司',
						Neirongqu: [
							'打开“我的电脑”，点击“工具”“文件夹选项”“查看”，取消隐藏受保护的操作系统文件，选择“显示所有文件和文件夹”。',
							'在 C 盘中找到 program files 文件夹，选择 installshield installation information，删除相关文件夹，重启电脑即可。'
						],
						date: '2024-06-10 14:45'
					},
					{
						name: '赵刚',
						buMen: '客服部',
						gongSI: '台州创新科技有限公司',
						Neirongqu: [
							'打开“我的电脑”，选择“工具”“文件夹选项”“查看”，取消隐藏受保护的操作系统文件，勾选“显示所有文件和文件夹”。',
							'在系统盘(C 盘)找到 program files 文件夹，进入 installshield installation information，删除指定文件夹，重启电脑。'
						],
						date: '2024-06-15 11:20'
					}
				],
				imageList: [
					'/static/Home/ico_khsq@2x.png',
					'/static/Home/bg@2x.png',
					'/static/Home/box1@2x.png',
					'/static/Home/box2@2x.png'
				],
				userAvatar: 'http://openapi.keyboardadmin.com:9001/KingdeeCommunity/UserAvatar.png',
				userName: '杨凌',
				userRole: '技术支持',
				userCompany: '深圳市金蝶软件有限公司'
			};
		},
		onLoad(query) {
			// 获取URL中传递的参数
			this.customerName = query.customerName;
			this.question = query.question;
			this.reply = query.reply;
			console.log("query", query);
		},
		mounted() {
			const storedUsername = uni.getStorageSync('username');
			const storedPassword = uni.getStorageSync('password');
			if (storedUsername) {
				this.userName = storedUsername;
			}
			if (storedPassword) {
				this.password = storedPassword;
			}
		},
		methods: {
			collect() {
				uni.showToast({
					title: '收藏成功',
					icon: 'success'
				});
			}
		}
	};
</script>
<style>
	page {
		background-color: #f6f6f6;
		padding-bottom: 220rpx;
	}

	.box_twwti {
		background-color: #ffffff;
		padding: 0 30rpx;
		overflow: hidden;
	}

	.Nameattribution {
		margin-left: 10rpx;
		/* width: rpx; */
		/* height: ; */
		/* padding: ; */
		/* margin: ; */
		/* box-align: center; */

	}

	.name_mc {
		font-weight: bold;
		font-size: 24rpx;
		color: #222222;
		display: flex;
	}

	.Gsimingcheng {
		font-weight: 400;
		font-size: 20rpx;
		color: #999999;
	}

	.Picture_display {
		padding-top: 15rpx;
		width: 100%;
		/* height: 465rpx; */
		display: flex;
		justify-content: space-around;
		flex-wrap: wrap;
		gap: 10rpx;
	}

	.box_tupianqu {
		width: 220rpx;
		height: 220rpx;
		/* background: #d8d8d8; */
		border-radius: 8rpx;
	}

	.View_attachment {
		margin-top: 20rpx;
		margin-bottom: 20rpx;
		font-weight: 500;
		font-size: 28rpx;
		color: #4170ff;
	}

	.tiwnzhe {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-top: 18rpx;
		margin-top: 20rpx;
		padding-bottom: 20rpx;
		border-top: 1rpx solid #ccc;
	}

	.tiwnzhe1 {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-top: 18rpx;
		margin-top: 20rpx;
		padding-bottom: 20rpx;
	}

	.profile_name {
		display: flex;
		align-items: center;
	}

	.box_jjfan {
		width: 248rpx;
		margin: 40rpx auto;
	}

	.diBuquyu {
		position: fixed;
		bottom: 0;
		left: 0;
		/* width: 100vh; */
		height: 160rpx;
		background: #ffffff;
		box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(0, 0, 0, 0.1);
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 50rpx;
	}

	.xiehuida {
		width: 540rpx;
		height: 80rpx;
		border-radius: 40rpx;
		border: 5rpx solid #4170ff;
		font-weight: bold;
		font-size: 32rpx;
		color: #4170ff;
		text-align: center;
		line-height: 80rpx;
	}

	.box_wzbt {
		font-weight: bold;
		font-size: 36rpx;
		color: #222222;
		margin-top: 34rpx;
	}

	.box_xshiweni {
		font-weight: 400;
		font-size: 28rpx;
		color: #666666;
		margin: 22rpx 0;
	}

	.Modulearea {
		width: 558rpx;
		display: flex;
		justify-content: space-between;
		margin-bottom: 22rpx;
	}

	.box_qqjieda {
		display: flex;
		font-weight: 400;
		font-size: 24rpx;
		color: #4170ff;
	}

	.Question_date {
		display: flex;
		font-weight: 400;
		font-size: 20rpx;
		color: #999999;
		margin: 20rpx 0;
	}

	.Box_Hdawenti {
		width: 690rpx;
		background: #ffffff;
		margin: 0 auto;
		margin-top: 20rpx;
		border-radius: 16rpx;
		padding: 0 30rpx;
		box-sizing: border-box;
		overflow: hidden;
		padding-bottom: 25rpx;
	}

	.box_lyb {
		font-weight: 400;
		font-size: 24rpx;
		color: #222222;
	}

	.Timereply {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 25rpx;
	}

	.responsetime {
		font-weight: 400;
		font-size: 20rpx;
		color: #999999;
		display: flex;
	}

	.reply {
		width: 120rpx;
		border-radius: 26rpx;
		border: 2rpx solid #4170ff;
		font-weight: 400;
		font-size: 24rpx;
		color: #4170ff;
		text-align: center;
		line-height: 50rpx;
	}

	.ui_san {
		display: flex;
		width: 275rpx;
		justify-content: space-between;
	}

	.action-btn {
		display: flex;
		flex-direction: column;
	}

	.btn-container {
		margin-left: 106rpx;
		width: 260rpx;
		height: 80rpx;
		border-radius: 40rpx;
		text-align: center;
		line-height: 80rpx;
		border: 3rpx solid #4170FF;
		color: #4170FF;

	}
</style>